$(function() {
    var form = layui.form

    function getCateList() {
        $.ajax({
            url: '/my/article/cates',
            method: 'GET',
            success: function(res) {
                if (res.status !== 0) {
                    return layer.msg(res.message)
                }
                // 渲染列表
                var htmlStr = template('cate-tpl', res)
                console.log(htmlStr);
                $('[name="cate_id"]').append(htmlStr)
                    // 修改后重新渲染
                form.render()
            }

        })
    }
    getCateList()
        // 初始化富文本编辑器
    initEditor()
        // 1. 初始化图片裁剪器
    var $image = $('#image')

    // 2. 裁剪选项
    var options = {
        aspectRatio: 400 / 280,
        preview: '.img-preview'
    }

    // 3.点击封面弹出对话框
    $image.cropper(options)
    $('#choose-cover').click(function() {
        $('#file').click()
    })
    $('#file').change(function() {
            var files = this.files
            if (files == 0) {
                return
            }
            // 根据文件，创建对应的 URL 地址
            var newImgURL = URL.createObjectURL(files[0])
                // 为裁剪区域重新设置图片
            $image
                .cropper('destroy') // 销毁旧的裁剪区域
                .attr('src', newImgURL) // 重新设置图片路径
                .cropper(options) // 重新初始化裁剪区域
        })
        // 提前定义一个变量
    var state = '已发布'
        // 6监听表单提交
    $('#form-publish').on('submit', function(e) {
            e.preventDefault()
                // 一次性拿到所有表单文件
            var fd = new FormData(this)
            fd.forEach((item) => console.log(item));
            $image
                .cropper('getCroppedCanvas', {
                    // 创建一个 Canvas 画布
                    width: 400,
                    height: 280,
                })
                .toBlob(function(blob) {
                    // 将 Canvas 画布上的内容，转化为文件对象
                    // 得到文件对象后，进行后续的操作
                    // 5. 将文件对象，存储到 fd 中
                    fd.append('cover_img', blob)
                    fd.append('state', state)
                        // 6. 发起 ajax 数据请求
                    $.ajax({
                        url: '/my/article/add',
                        method: 'POST',
                        data: fd,
                        contentType: false,
                        processData: false,
                        success: function(res) {
                            if (res.status !== 0) {
                                return layer.msg(res.message)
                            }
                            layer.msg('发布成功')
                            location.href = '/article/art-list.html'
                        },
                    })
                })
        })
        // 7 给存为草稿添加事件
    $('#save-draft').click(function() {
        state = '草稿'
    })

})